<template>
    <!-- <van-nav-bar fixed title="" >
        <template #left>
            <span style="color: black">返回</span>
        </template>
    </van-nav-bar> -->
    <div class="bd">
        <div class="title">正确示范</div>

        <van-image
            width="72"
            height="72"
            :src="imageSrcLocal('default_avator.png')"
        ></van-image>

        <div class="avator-desc">
             需上传单人，正脸，脸部清晰，无遮挡的人像照片
            人脸区域相对整图的占比在15%以上效果更佳
        </div>
        <div class="title">不佳示范</div>

        <div class="head-list first-row">
            <head-item v-for="item in iconList1" :data="item"> </head-item>
        </div>
        <div class="head-list second-row">
            <head-item v-for="item in iconList2" :data="item"> </head-item>
        </div>

        <div class="flexable"></div>
        <section class="bottom">
            <div class="statement">
                由NOLO公司提供上传服务，您所上传的照片将仅被用于本活动，我们仅提供AI内容创作服务，不会提取识别信息，不会用于识别用途
            </div>
            <div class="btn" @click="onIknowClick">我知道了</div>
            <section class="argument">
                <van-image
                    v-show="checked"
                    @click="checked = false"
                    width="20"
                    height="20"
                    :src="imageSrcLocal('checkbox_s.png')"
                ></van-image>
                <van-image
                    v-show="!checked"
                    @click="checked = true"
                    width="20"
                    height="20"
                    :src="imageSrcLocal('checkbox_n.png')"
                ></van-image>
                <span class="text"
                    >已阅读
                    <span class="colorfull" @click="onArguClick"
                        >《AI智创彩铃须知》</span
                    >并确认授权
                </span>
            </section>
        </section>
    </div>
    <!-- 底部渐变色 -->
    <van-popup
        v-model:show="showArguAlert"
        :style="{
            width: '90%',
            backgroundColor: 'rgba(27, 30, 37, 1);',
            overflow: 'hidden',
            borderRadius: '11px',
            border: 'none',
        }"
    >
        <div class="alert-bg">
            <van-image
                @click="showArguAlert = false"
                class="close-img"
                :src="Utils.getLocalImageSrc('close.png')"
            ></van-image>
            <h4 class="title">AI智创彩铃须知</h4>
            <div class="content">
                <p>
                    1.本服务由北京凌宇智控科技有限公司(以下简称
                    NOLO)提供，您上传的照片或图片，视为您授权 NOLO
                    在本次服务内使用您的个人信息，您需对上传的照片或图片的版权负责。<span
                        class="underline"
                    >
                        系统将通过后期技术在页面上生成新的
                        AI创意视频，在此过程中，您所上照片中的人脸肖像权将仅被用于本服务。</span
                    >如有版权纠纷，NOLO可根据法律法规删除您上传的素材及制作的内容。咪咕音乐不承担因此带来的任何第三方责任及法律风险。<span
                        class="underline"
                        >请仔细阅读《AI
                        智创彩铃须知》，您接受协议所述条款和条件后方可勾选“已阅读《AI智创彩铃须知》并确认授权”
                        一栏并点击“同意”。</span
                    >
                </p>
                <p>
                    2.请上传单人清晰的正面形象照，请勿上传涉及隐私、违规披露个人信息、淫秽色情、暴力血腥、违反国家法律法规及可能对咪咕音乐运营及
                    NOLO 带来潜在威胁的照片或图片。<span class="underline"
                        >您保证对于上传的内容拥有相应的合法权利或已取得他人合法授权并有权用于参与本服务。否则，造成的一切后果及损失由您自行承担。</span
                    >
                </p>
                <p>
                    3.当您授权本服务时，我们可能会向合作伙伴咪咕音乐有限公司共享您的某些个人信息，以保障为您共享的服务得以顺利完成。本图片管理政策如果有未涉及的情况，则参考《咪咕用户服务协议》和相关法律法规及政策要求处理。用户违反上述规定的，咪咕音乐有权依据《咪咕用户服务协议》和本公告处理。
                </p>
            </div>
            <div class="gradient"></div>
            <div class="btn" @click="onReadAndAgree">我已阅读并同意</div>
        </div>
    </van-popup>
    <van-action-sheet v-model:show="showActionSheet">
        <div class="action-sheet">
            <div class="action-sheet-items-bg">
                <div class="touch-line"></div>
                <actionsheet-item
                    v-for="(item, index) in actionsheetList"
                    :data="item"
                    :index="index"
                    @itemClick="actionSheetItemClick"
                ></actionsheet-item>
            </div>

            <van-button
                block
                round
                class="action-cancel-btn"
                @click="showActionSheet = false"
                >取消</van-button
            >
        </div>
    </van-action-sheet>

    <input
        id="uploaFile"
        type="file"
        accept="image/*"
        @change="onFileChange($event)"
    />
</template>

<script lang="ts" setup name="index">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import Utils from "../../utils/utils";
import HeadItem from "../../components/HeadItem.vue";
import ActionsheetItem from "../../components/ActionsheetItem.vue";
import HeadItemModel from "../../types/headItem";
import { Toast } from "vant";
import { ROUTER_NAME_CLIP_PAGE } from "../../route";
import { useNoloStore } from "../../store";

const store = useNoloStore();
const checked = ref(false);
const showArguAlert = ref(false);
const showActionSheet = ref(false);
const router = useRouter();

const imageSrcLocal = (name: string) => {
    return new URL(`../../assets/${name}`, import.meta.url).href;
};

const iconList1: Array<HeadItemModel> = [
    { icon: "head1.png", label: "非人物照" },
    { icon: "head2.png", label: "五官遮挡" },
    { icon: "head3.png", label: "模糊不清" },
    { icon: "head4.png", label: "衣着不当" },
    { icon: "head5.png", label: "面部过大" },
];
const iconList2: Array<HeadItemModel> = [
    { icon: "head6.png", label: "多张人脸" },
    { icon: "head7.png", label: "夸张表情" },
    { icon: "", label: "" },
    { icon: "", label: "" },
    { icon: "", label: "" },
];

const actionsheetList: Array<HeadItemModel> = [
    { icon: "carema.png", label: "拍照" },
    { icon: "photo.png", label: "从相册选择" },
];
const onIknowClick = () => {
    if (checked.value == false) {
        Toast({
            message: "请先阅读并同意《AI智创彩铃须知》",
        });
    } else {
        //去掉相机 相册选择弹框，直接弹出系统媒体库
        // showActionSheet.value = true;
        const input = document.getElementById("uploaFile");
        input!.click();
    }
};

const onReadAndAgree = () => {
    showArguAlert.value = false;
    checked.value = true;
};

const onArguClick = () => {
    showArguAlert.value = true;
};
const actionSheetItemClick = (index: number) => {
    showActionSheet.value = false;
    const input = document.getElementById("uploaFile");
    input!.click();
};

const onFileChange = async (input: any) => {
    if (
        !input ||
        !input.target ||
        !input.target.files ||
        input.target.files.length == 0
    ) {
        return;
    }
    try {
        const file = input.target.files[0] as File;
        let imgSrc = URL.createObjectURL(file);
        //跳转到下个页面
        router.push({
            name: ROUTER_NAME_CLIP_PAGE,
            params: {
                imgSrc: imgSrc,
            },
            // query: {
            //     imgSrc: imgSrc,
            // },
        });
    } catch (e) {
        Toast("选取照片失败");
    }
};
</script>

<style lang="less" scoped>
@import url(../../style/index.less);
.user-icon {
    width: 30px;
    height: 30px;
}
.bd {
    // padding-top: var(--van-nav-bar-height);
    // background-color: #f5f5f6;
    background-color: black;
    height: 100vh;
    --van-dialog-width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;

    .title {
        width: 100%;
        text-align: left;
        color: white;
        font-size: 17px;
        line-height: 40px;
        height: 40px;
    }
    .avator-desc {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        line-height: 17px;
        margin-bottom: 40px;
        margin-top: 10px;
    }

    .head-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }
    .first-row {
        padding-top: 20px;
        padding-bottom: 10px;
    }
    .second-row {
        padding-bottom: 20px;
    }
    .flexable {
        flex: 1;
    }
    .bottom {
        margin-bottom: 44px;
        .statement {
            color: rgba(255, 255, 255, 0.4);
            font-size: 12px;
            line-height: 14px;
        }

        .argument {
            display: flex;
            justify-content: center;
            align-items: center;

            .text {
                font-size: 12px;
                line-height: 14px;
                color: rgba(255, 255, 255, 0.6);
                .colorfull {
                    color: rgb(113, 239, 210);
                }
            }
        }
    }
}
.btn {
    width: 229px;
    height: 45px;
    margin: 10px auto;
    line-height: 45px;
    border-radius: 22px;
    color: black;
    font-size: 18px;
    text-align: center;
    background: linear-gradient(318deg, #21d7fe 0%, #42ffe1 47%, #c4ffba 100%);
}

.alert-bg {
    position: relative;
    border-radius: 10px;
    padding: 20px;
    background-color: rgba(27, 30, 37, 1);
    overflow: hidden;
    // border: 2px solid #222;
    // box-shadow: 1px 0 5px 5px #555;
    height: 410px;

    .close-img {
        position: absolute;
        top: 5px;
        right: 10px;
        width: 24px;
        height: 24px;
    }
    .title {
        margin-top: 10px;
        color: white;
        font-size: 17px;
        line-height: 20px;
    }
    .content {
        position: relative;
        height: 280px;
        overflow: scroll;
        padding-bottom: 20px;

        p {
            margin-top: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 20px;
            .underline {
                text-decoration: underline;
            }
        }
    }
    .gradient {
        position: fixed;
        bottom: 70px;
        left: 0;
        right: 0;
        height: 30px;
        // background-color: orange;
        //渐变色
        background: linear-gradient(
            0,
            rgba(27, 30, 37, 1) 0%,
            rgba(27, 30, 37, 0) 100%
        );
    }
}
.action-sheet {
    position: relative;
    background-color: rgba(27, 30, 37, 1);
    padding: 20px 16px 36px 16px;
    overflow: hidden;

    .touch-line {
        position: absolute;
        top: 9px;
        left: 50%;
        width: 30px;
        height: 3px;
        border-radius: 1.5px;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.2);
    }
    &-items-bg {
        border-radius: 10px;
        // box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.05);
        margin-bottom: 20px;
        overflow: hidden;
    }
    .action-cancel-btn {
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.6);
        font-size: 16px;
    }
}
#uploaFile {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
</style>
